<script setup>

	import {ref, reactive} from 'vue'
	import {useRouter, useRoute} from "vue-router"
    import orderApi from '@/api/order/order'
    import OrderBtns from '@/components/OrderBtns.vue'

	const router = useRouter()
	const route = useRoute()

    const data = reactive({
        tabs: [
            {title: '全部', status: ''},
            {title: '待付款', status: '0'},
            {title: '待发货', status: '1'},
            {title: '待收货', status: '2'},
            {title: '退款中', status: '5'},
        ],
        activeTabStatus: '',
        orderList: [],
        status: '',
        current: 1,
        loading: false,
        finished: false
    })

    data.status = data.activeTabStatus = route.query.status

    const changeTab = (status) => {
        data.activeTabStatus = status
        data.status = status
        data.current = 1
        data.orderList = []
        data.finished = false

        router.replace('/order/list?status=' + status)
    }

    const initData = () => {
        orderApi.getOrderPageByStatus({
            current: data.current,
            status: data.status
        }).then(response => {
            data.orderList.push(...response.data.records)
            data.loading = false

            if(response.data.total === data.orderList.length){
                data.finished = true
            }

            data.current++
        })
    }
</script>

<template>

	<van-nav-bar title="订单管理" left-text="返回" left-arrow @click-left="$router.go(-1)"/>

    <van-tabs :active="data.activeTabStatus " :before-change="changeTab">
        <van-tab :title="tab.title" :name="tab.status" v-for="tab in data.tabs">

            <van-list
                    v-model:loading="data.loading"
                    :finished="data.finished"
                    finished-text="没有更多了"
                    @load="initData"
            >
                <div style="background-color: white;" v-for="order in data.orderList">

                    <van-cell-group style="margin-top: 8px;" border @click.native="$router.push('/order/detail?id=' + order.id)">
                        <van-cell :title="'订单: ' + order.sn" :value="order.orderStatusStr"></van-cell>
                        <van-card
                                v-for="orderItem in order.orderItems"
                                :title="orderItem.productName"
                                :price="orderItem.price"
                                :num="orderItem.quantity"
                                :thumb="orderItem.productImage"
                        >
                            <template #tags>
                                <van-tag color="#c8c9cc" text-color="white" style="margin: 6px 6px 0 0;" v-for="it in orderItem.sku.split(';')">{{it}}</van-tag>
                            </template>
                        </van-card>

                    </van-cell-group>

                    <div class="total">合计: ￥{{order.totalAmount}}（含运费￥{{order.freight}}）</div>
                    <div slot="footer">
                        <OrderBtns :order="order"></OrderBtns>
                    </div>
                </div>
            </van-list>


		</van-tab>
	</van-tabs>
</template>

<style lang="scss" scoped>
	.total {
		font-size: 14px;
		text-align: right;
		padding: 10px;
	}
</style>
